<template>
  <el-container>
    <el-header height="648px">
      <el-carousel height="648px" direction="vertical" :autoplay="true">
        <el-carousel-item v-for="item in photo" :key="item.index">
          <el-image :src="item.url"></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-header>
    <el-main style="margin: 20px;height: 100%">
      <div style="height: 300px">
        <div class="leftInfo">
          <div style="text-align: center"><h1 style="color: #8fb6d9">{{ today }}</h1></div>
          <div><h2 style="color: #fff;font-size: 40px">今日开馆</h2></div>
          <p style="color: #fff">除法定节假日，博物院全年实行周一闭馆<br>
            <strong style="color: #eed49b">
              <b>参观须提前订票，</b>
              最早可于参观7日前20:00开始预订。
              <b>年票观众须至少提前一日登记参观。</b>
              刷身份证检票后入院参观。
            </strong>
          </p>
          <div style="margin-left: 17%;margin-top: 1.5%">
            <div style="display: flex">
              <div class="li"><h1>08:30</h1>
                <p style="color: #8fb6d9;font-size: 14px">开放入馆时间</p></div>
              <span class="tag"></span>
              <div class="li"><h1>15:30</h1>
                <p style="color: #8fb6d9;font-size: 14px">停止入馆时间</p></div>
              <span class="tag"></span>
              <div class="li"><h1>16:30</h1>
                <p style="color: #8fb6d9;font-size: 14px">闭馆时间</p></div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="ll">
            <div style="width: 150px;height: 150px;border-radius: 10px;background: #24384b">
              <div style="width: 58px;height: 58px"><img class="img" src="../../assets/book.png" alt=""/></div>
              <div style="margin-top: 20%"><span style="color: #e9d199;font-size: 22px">在线订票</span></div>
            </div>
            <div class="p">咨询电话</div>
            <div class="tel"><span style="">400-950-1925</span></div>
            <div class="time">服务时间：08:00–20:00</div>
          </div>
          <div class="rr">
            <div style="float: left;padding-top: 5%" class="ic">
              <div><img style="width: 40px;height: 52px" src="../../assets/jt.png" alt=""></div>
              <div class="alt">交通路线</div>
            </div>
            <div style="float: right;padding-top: 5%" class="ic">
              <div><img style="width: 52px;height: 45px" src="../../assets/cg.png" alt=""></div>
              <div class="alt">参观须知</div>
            </div>
            <div style="float: right;" class="ic">
              <div><img style="width: 52px;height: 52px" src="../../assets/dl.png" alt=""></div>
              <div class="alt">导览地图</div>
            </div>
            <div style="float: left;" class="ic">
              <div><img style="width: 52px;height: 45px" src="../../assets/qj.png" alt=""></div>
              <div class="alt">全景故宫</div>
            </div>
          </div>
        </div>
      </div>
      <el-divider>
        <div style="background-color: #f9f4e9;color: #b99b3d">历史不落 繁华依旧</div>
      </el-divider>
      <el-row>
        <el-col :span="10" :offset="7">

          <div class="search_input" style="margin-top: 15px;">
            <el-card shadow="hover" :body-style="{ padding: '5px' }">
              <el-input prefix-icon="el-icon-search" v-model="input" placeholder="输入关键字搜索"
                        class="input-with-select">
                <el-select clearable v-model="value" slot="prepend" placeholder="藏品类别" @change="refreshData">
                  <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categoryDetail"
                             :value="item.categoryId">
                    <span style="float: left">{{ item.categoryDetail }}</span>
                  </el-option>
                </el-select>
                <el-button style="border:0;color:#fff;background-color: #00AEEC" slot="append" @click="search"
                           icon="el-icon-search">搜索
                </el-button>
              </el-input>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-left: -3%">
        <!--  v-for实现el-card的循环展示  接收并展示数据-->
        <el-col :span="7" v-for="collection in collectionList" :key="collection.id" style="margin-left: 50px">
          <el-card shadow="hover" style="margin-top: 20px;height: 300px;width: 470px;" :body-style="{ padding: '0px' }">
            <el-image style="float: left;width: 40%;height: 300px" :src="collection.collectionImage"/>
            <div class="rightCard">
              <div style="font-weight: bold;color:#140C40;width: 100%">{{ collection.collectionName }}</div>
              <div style="margin-top: 2%">
                <el-tag size="mini" style="margin-left: 5px" type="primary">{{ collection.collectionEra }}</el-tag>
                <el-tag size="mini" style="margin-left: 12px" type="primary">{{ collection.categoryDetail }}</el-tag>
              </div>
              <div class="content">{{ collection.collectionDetail }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {categorySearch, search} from "@/api/request";

export default {
  data() {
    return {
      photo: [
        {index: 1, url: require('../../assets/s65a0a396d6207.jpg')},
        {index: 2, url: require('../../assets/s65a0a396d6207.jpg')},
        {index: 3, url: require('../../assets/s65a0a396d6207.jpg')},
        {index: 4, url: require('../../assets/s65a0a396d6207.jpg')},
      ],
      input: '',
      categoryList: [],
      value: '',
      today: '',
      collectionList: [],
    }
  },
  methods: {
    search() {
      let data = {
        collectionName: this.input,
        categoryId: this.value
      }
      search(data).then(res => {
        this.collectionList = res.data.data
      })
    },
    getCurrentDate() {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let day = now.getDate();
      return year + "-" + month + "-" + day;
    },
    refreshData(val) {
      this.$forceUpdate()
    },
  },
  mounted() {
    this.today = this.getCurrentDate()
    categorySearch().then(
        res => {
          if (res.data.code === 1) {
            this.categoryList = res.data.data
          }
        }
    )
    this.search()
  }
}
</script>

<style>
.el-input__inner {
  box-shadow: none !important;
  border: 0 !important;
}

.el-select .el-input {
  width: 130px;
}

.el-input-group__append, .el-input-group__prepend {
  border: 0 !important;
}

.input-with-select .el-input-group__prepend {
  border: 0 !important;
  background-color: #fff;
}

.rightCard {
  padding-top: 16px;
  float: right;
  width: 270px;

}

.content {
  line-height: 24px;
  padding: 6px;
  font-size: 13px;
  color: #2c3e50;
  text-align: left;
}

.el-header {
  padding: 0 !important;
}

.el-main {
  padding: 0 !important;
  background-color: #f9f4e9 !important;
}

.el-input__inner {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border: none;
}

.el-button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.el-divider {
  margin-top: 3% !important;
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%) !important;
  height: 3px !important;
}

.el-divider__text {
  background-color: #f9f4e9 !important;
  font-weight: bold !important;
  font-size: 18px !important;
}

.leftInfo {
  display: block;
  float: left;
  padding: 30px;
  width: 45%;
  color: #fff;
  background-image: url(../../assets/png5.png);
}

.right {
  display: block;
  float: right;
  padding: 30px;
  width: 45% !important;
  color: #fff;
  background-image: url(../../assets/png6.png);
}

.li {
  float: left;
  width: 85px;
  display: block;
}

.tag {
  background-image: url(../../assets/tag.png);
  width: 31px;
  height: 6px;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 32px;
  display: block;
}

h1 {
  font-family: Impact, Arial;
  margin-bottom: 5px;
  font-size: 38px;
  font-weight: 400;
}

.ll {
  width: 40%;
  text-align: center;
  margin-left: 13%;
  margin-top: 2%;
  float: left;
}

.img {
  width: 100%;
  padding-left: 80%;
  padding-top: 50%;
}

.p {
  font-size: 22px;
  letter-spacing: 15px;
  width: 150px;
  margin-left: 7px;
  margin-top: 6px
}

.tel {
  font-size: 23px;
  margin-left: -54%;
  margin-top: 1.5%
}

.time {
  font-size: 12px;
  width: 150px;
  height: 16px;
  color: #8fb6d9;
  margin-top: 0.6%;
}

.ic {
  padding-left: 64px;
  padding-bottom: 40px;
}

.rr {
  width: 40%;
  float: left;
}

.alt {
  margin-left: -20%;
  margin-top: 1%
}
</style>
